<template>
  <div class="form_attr">
    <div class="monograph">
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>表单内容</span>
        </div>
        <div class="layout_content">
          <el-collapse>
            <el-collapse-item v-for="(item, index) in param.attr.formList" :key="index" :title="item.title" :name="index">
              <el-form label-width="60px" size="mini" class="el-collapse-item__inline">
                <el-form-item label="字段名:">
                  <el-input v-model="item.title" size="small" />
                </el-form-item>
                <el-form-item label="必填:">
                  <el-radio-group v-model="item.rules.required" size="small">
                    <el-radio-button :label="true">必填</el-radio-button>
                    <el-radio-button :label="false">不必填</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="">
                  <el-link :underline="false" icon="el-icon-delete" type="danger" @click="formDel(param.attr.formList, index)">删除字段</el-link>
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </div>
        <el-link class="mTop16" icon="el-icon-plus" type="primary" :underline="false" @click="formAdd">添加字段</el-link>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>高级设置</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.button_text" placeholder="请输入按钮文字">
                <template slot="prepend">按钮文字</template>
              </el-input>
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="24">
              <el-input v-model="param.attr.hrefUrl" placeholder="请输入URL">
                <template slot="prepend">跳转地址</template>
              </el-input>
            </el-col>
          </el-row>
          <!--          <el-row class="mTop16" :gutter="20">-->
          <!--            <el-col :span="9" class="lineHeight36">表单字段颜色</el-col>-->
          <!--            <el-col :span="4">-->
          <!--              <el-color-picker v-model="param.attr.background" size="small" show-alpha />-->
          <!--            </el-col>-->
          <!--          </el-row>-->
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>表单样式</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">表单背景颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.background" size="small" show-alpha />
            </el-col>
          </el-row>
          <!--          <el-row class="mTop16" :gutter="20">-->
          <!--            <el-col :span="9" class="lineHeight36">表单字段颜色</el-col>-->
          <!--            <el-col :span="4">-->
          <!--              <el-color-picker v-model="param.attr.background" size="small" show-alpha />-->
          <!--            </el-col>-->
          <!--          </el-row>-->
        </div>
      </div>
      <div class="content">
        <div class="title">
          <div class="tile_div" />
          <span>按钮样式</span>
        </div>
        <div class="layout_content">
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮背景颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.button_background" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮边框颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.button_border_background" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体颜色</el-col>
            <el-col :span="4">
              <el-color-picker v-model="param.attr.color_button" size="small" show-alpha />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮宽度</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_width" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮高度</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_height" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮圆角</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_border_radius" class="widthAuto" :min="1" :max="100" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮边框粗细</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.button_border_width" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体大小</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.font_size_button" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体间距</el-col>
            <el-col :span="10">
              <el-input-number v-model="param.attr.letter_spacing_button" class="widthAuto" :min="1" size="small" controls-position="right" />
            </el-col>
          </el-row>
          <el-row class="mTop16" :gutter="20">
            <el-col :span="9" class="lineHeight36">按钮字体粗细</el-col>
            <el-col :span="10">
              <el-select v-model="param.attr.font_weight_button" size="small" placeholder="请选择">
                <el-option
                  label="正常"
                  value="normal"
                />
                <el-option
                  label="粗"
                  value="bold"
                />
                <el-option
                  label="更粗"
                  value="bolder"
                />
                <el-option
                  label="更细"
                  value="lighter"
                />
              </el-select>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { ColorPicker, Select, Option, Collapse, CollapseItem } from 'element-ui'
import { mapGetters } from 'vuex'
Vue.use(ColorPicker)
Vue.use(Select)
Vue.use(Option)
Vue.use(Collapse)
Vue.use(CollapseItem)

export default {
  name: 'FormAttr',
  computed: {
    ...mapGetters([
      'viewData',
      'iphoneIndex'
    ])
  },
  props: {
    type: {
      type: String,
      default: 'form'
    },
    param: {
      type: Object,
      default: Object
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    formAdd() {
      const _that = this
      const arrayForm = _that.param.attr.formList
      const length = _that.param.attr.formList.length
      const params = { title: '新增字段' + (Number(length) + 1), prop: 'add' + length, required: true, value: '', type: 'input', rules: { required: true, message: '请输入', trigger: 'blur' }}
      arrayForm.push(params)
    },
    formDel(item, index) {
      item.splice(index, 1)
    }
  }
}
</script>

<style lang="scss">
    .form_attr {
      .monograph {
        margin: 20px 0;
        .content {
              padding: 24px 8px;
              border-bottom: 1px solid #e8e8e8;
            .el-collapse-item__content {
              padding-bottom: 0px !important;
            }
            .marTop15 {
                margin-top: 15px;
            }
            .layout_content {
              font-size: 14px;
              color: #333;
            }
          .title {
              display: flex;
              align-items: center;
              margin-bottom: 20px;
              .tile_div {
                  width: 4px;
                  height: 16px;
                  border-radius: 2px;
                  display: inline-block;
                  background-color: #4e90ff;
              }
              span {
                  color: #333;
                  font-size: 20px;
                  padding-left: 8px;
              }
            }
          }
        }
    }
</style>
